// 组件: zj-input 输入框
// https://developers.weixin.qq.com/miniprogram/dev/component/input.html
// ==================== 参数 ====================
// ※ value ==> 当前值
// ※ model ==> 双向绑定时父组件的键名
// ※ type ==> 类型 text/number/idcard=身份证/digit=带小数点的数字 (默认: text)
// ※ password ==> 是否是密码类型 (默认: false)
// ※ placeholder ==> 提示文字 (默认: '请输入')
// ※ clearable ==> 是否可清除 (默认: true)
// ※ disabled ==> 是否禁用 (默认: false)
// ※ maxlength ==> 最大输入长度，设置为 -1 的时候不限制最大长度 (默认: 140)
// ※ data ==> 数据, 仅做传递使用
// ※ error ==> 错误验证(当前值&提示信息 字体变红) (默认: false)
// ==================== 事件 ====================
// ※ bind:model="model(e)" ==> 双向绑定
// ※ bind:input="input(e)" ==> 输入时
// ※ bind:focus="focus(e)" ==> 获取焦点
// ※ bind:blur="blur(e)" ==> 失去焦点
// ==================== 插槽 slot ====================
// ※ 默认插槽 ==> xxxxx
// ==================== 方法 ====================
// ※ xxxxx ==> xxxxx

Component({
  properties: {
    value: { // 当前值
      type: String
    },
    model: { // 双向绑定时父组件的键名
      type: String
    },
    type: { // 类型 text/number/idcard=身份证/digit=带小数点的数字
      type: String,
      value: 'text'
    },
    password: { // 是否是密码类型
      type: Boolean,
      optionalTypes: [String, Number, Boolean]
    },
    placeholder: { // 提示文字
      type: String,
      value: '请输入'
    },
    clearable: { // 是否可清除
      type: Boolean,
      optionalTypes: [String, Number, Boolean],
      value: true
    },
    disabled: { // 是否禁用
      type: Boolean,
      optionalTypes: [String, Number, Boolean]
    },
    maxlength: { // 最大输入长度，设置为 -1 的时候不限制最大长度
      type: Number,
      value: 140
    },
    data: { // 数据, 仅做传递使用
      type: String, // 没用, 这个设定太弱智了
      optionalTypes: [String, Number, Boolean, Object, Array]
    },
    error: { // 错误验证
      type: Boolean, // 没用, 这个设定太弱智了
      optionalTypes: [String, Number, Boolean],
      value: false
    }
  },
  data: {
    isClear: false // 是否显示清除按钮
  },
  observers: {
    'isClear': function (isClear) {
      console.log('isClear', isClear)
    }
  },
  methods: {
    // ========== 设置当前值(双向绑定) ==========
    setVal (e, val) {
      if (!e.currentTarget) {
        e = {
          currentTarget: { dataset: { model: this.properties.model } },
          detail: { value: val || '' }
        }
      }
      this.triggerEvent('model', e)
      this.triggerEvent('input', e)
    },
    // ========== 监听输入框输入下划线有时bindconfirm ==========
    confirm (e) {
      this.setVal(e) // 设置当前值(双向绑定)
    },
    // ========== 清除 ==========
    clear () {
      console.log('clear')
      this.setVal({}) // 设置当前值(双向绑定)
    },
    // ========== 输入时 ==========
    input (e) {
      let value = e.detail.value
      const maxlength = this.properties.maxlength
      if (maxlength && value.length > maxlength) {
        e.detail.value = value.slice(0, maxlength)
        // e.detail.value = value.substr(0, maxlength)
      }
      this.setVal(e) // 设置当前值(双向绑定)
    },
    // ========== 获取焦点 ==========
    focus (e) {
      console
      this.triggerEvent('focus', e)
      this.setData({ isClear: true })
    },
    // ========== 失去焦点 ==========
    blur (e) {
      this.triggerEvent('blur', e)
      // wx.nextTick(() => {
      //   this.setData({ isClear: false })
      // })
      setTimeout(() => {
        this.setData({ isClear: false })
      }, 30)
    }
  }
})
